<template>
	<view :class="baseBtnClass" @click="handleClick">{{ text }}</view>
</template>

<script>
	export default {
		name: "base-button",
		props: {
			text: {
				type: String,
				default: "按钮" // 按钮文本
			},
			type: {
				type: String,
				default: "primary" // primary 高亮 defalut 灰色
			},
			size: {
				type: String,
				default: "large" // 按钮大小 large-大的 mini-小的
			},
			shape: {
				type: String,
				default: "square" // 按钮边角 square-正方形 circle-圆角
			},
			disabled: {
				type: Boolean,
				default: false, // 按钮是否禁用
			},
		},
		data() {
			return {

			};
		},
		computed: {
			baseBtnClass() {
				const sizeToClass = {
					'large': 'base-button-large',
					'mini': 'base-button-mini'
				};
				const shapeSuffix = {
					'large': {
						'square': 'base-button-large-square',
						'circle': 'base-button-large-circle',
					},
					'mini': {
						'square': 'base-button-mini-square',
						'circle': 'base-button-mini-circle',
					},
				};
				const bgColorSuffix = {
					'primary': 'base-button-primary',
					'default': 'base-button-default',
				};
				const sizeClass = sizeToClass[this.size] || '';
				const shapeClass = shapeSuffix[this.size][this.shape] || '';
				const disabledClass = this.disabled ? ' base-button-disabled' : '';
				const bgColorClass = bgColorSuffix[this.type] || '';
				// console.log("样式", `${sizeClass} ${shapeClass} ${disabledClass} ${bgColorClass}`);
				return `${sizeClass} ${shapeClass} ${disabledClass} ${bgColorClass}`;
			}
		},
		methods: {
			handleClick() {
				if (this.disabled) return;
				this.$emit("click");
			}
		}
	}
</script>

<style lang="scss" scoped>
	.base-button-large {
		width: 650rpx;
		height: 96rpx;
		font-size: 35rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto;
	}

	.base-button-large-square {
		border-radius: 20rpx;
	}

	.base-button-large-circle {
		border-radius: 48rpx;
	}

	.base-button-mini {
		width: 170rpx;
		height: 54rpx;
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.base-button-mini-square {
		border-radius: 10rpx;
	}

	.base-button-mini-circle {
		border-radius: 28rpx;
	}

	.base-button-disabled {
		background-color: #BBBBBB !important;
	}
	
	.base-button-primary {
		background-color: #434343;
	}
	
	.base-button-default {
		background-color: #D0D0D0;
	}
</style>